<template>
  <div class="pd" v-loading.body="loading">
    <el-tabs type="border-card">
      <el-tab-pane label="早餐">
        <ul class="splists clearfix">
          <li class="list fl" v-if="breakfast.length===0">
            <p class="no-data-tip">暂无数据</p>
          </li>
          <li class="list fl" v-else v-for="item in breakfast">
            <span class="name" v-html="item.name"></span>
            <span class="meal" v-html="item.type"></span>
            <span class="time" v-html="item.time"></span>
            <span class="type">未上传</span>
            <span class="el-icon-arrow-right sp-icon" @click="godetail(item.order_id, item.time)"></span>
            <span class="el-icon-close sp-icon" @click="delsign(item, $event)"></span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="中餐">
        <ul class="splists clearfix">
          <li class="list fl" v-if="lunch.length===0">
            <p class="no-data-tip">暂无数据</p>
          </li>
          <li class="list fl" v-else v-for="item in lunch">
            <span class="name" v-html="item.name"></span>
            <span class="meal" v-html="item.type"></span>
            <span class="time" v-html="item.time"></span>
            <span class="type">未上传</span>
            <span class="el-icon-arrow-right sp-icon" @click="godetail(item.order_id, item.time)"></span>
            <span class="el-icon-close sp-icon" @click="delsign(item, $event)"></span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="晚餐">
        <ul class="splists clearfix">
          <li class="list fl" v-if="supper.length===0">
            <p class="no-data-tip">暂无数据</p>
          </li>
          <li class="list fl" v-else v-for="item in supper">
            <span class="name" v-html="item.name"></span>
            <span class="meal" v-html="item.type"></span>
            <span class="time" v-html="item.time"></span>
            <span class="type">未上传</span>
            <span class="el-icon-arrow-right sp-icon" @click="godetail(item.order_id, item.time)"></span>
            <span class="el-icon-close sp-icon" @click="delsign(item, $event)"></span>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import config from '../../utils/config.js'
import axios from 'axios'
import crypt from '../../utils/crypto-helper-pkcs7'
export default {
  data () {
    return {
      breakfast: [],
      lunch: [],
      supper: [],
      nid: '',
      loading: true
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    getlist () {
      this.nid = this.$route.params.nid
      var param = {
        principal: this.nid
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.diet + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          var resdata = response.data
          var list = resdata.circle.new_list
          this.breakfast = list.breakfast
          this.lunch = list.lunch
          this.supper = list.supper
          this.loading = false
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    delsign (item, event) {
      var param = {
        order_id: item.order_id,
        meal_type: item.type,
        time: item.time
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确认要关闭该记录吗')
      .then(_ => {
        axios.get(config.domain + config.urls.delclock + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '该记录已关闭',
              type: 'success',
              duration: 1500
            })
            var dli = event.target.parentNode
            dli.parentNode.removeChild(dli)
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    },
    godetail (oid, time) {
      this.$router.push('/admin/index/order/detail/' + oid + '?tab=card&time=' + time)
    }
  }
}
</script>
<style>
.splists {
  background: #f4f8f8;
  padding: 20px 0;
}
.splists li {
  width: 44%;
  margin: 6px 3%;
  border: 1px solid #ddd;
  color: #777;
  box-sizing: border-box;
  font-size: 0;
  padding: 10px 0;
}
.splists li span {
  display: inline-block;
  text-align: center;
  font-size: 16px;
}
.splists li .name {
  width: 25%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.splists li .meal {
  width: 12%;
}
.splists li .time {
  width: 25%;
}
.splists li .type {
  width: 12%;
}
.splists li .sp-icon {
  width: 12%;
  font-size: 14px;
  cursor: pointer;
}
.splists li .el-icon-arrow-right {
  color: #20a0ff;
}
.no-data-tip {
  text-align: center;
  font-size: 16px;
  color: #000;
}
</style>

